<template>
  <el-row :gutter="8" class="introduce">
    <el-col v-bind="attarSpan">
      <IntroduceItem :count="toYuan(123454)"
                     :footerValue="toYuan(6583)"
                     footerLabel="日销售额"
                     title="总销售额">
        <Trend class="assimilate" flag="up" style="margin-right: 16px">
          周同比<span class="ratio">14%</span>
        </Trend>
        <Trend class="assimilate" flag="down">
          日同比<span class="ratio">10%</span>
        </Trend>
      </IntroduceItem>
    </el-col>
    <el-col v-bind="attarSpan">
      <IntroduceItem count="8888"
                     footerLabel="日访问量"
                     footerValue="1,234"
                     title="访问量">
        <VChart :loading="loading" :option="visitOption" autoresize/>
      </IntroduceItem>
    </el-col>
    <el-col v-bind="attarSpan">
      <IntroduceItem count="300"
                     footerLabel="转化率"
                     footerValue="60%"
                     title="订单量">
        <VChart :loading="loading" :option="orderOption" autoresize/>
      </IntroduceItem>
    </el-col>
    <el-col v-bind="attarSpan">
      <IntroduceItem :count="numeral(56324).format('0,0')"
                     footerLabel="今日新增"
                     footerValue="111"
                     title="总用户"
                     desc="这是说明啊">
        <el-progress :percentage="70" :stroke-width="8" class="progress"/>
      </IntroduceItem>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import VChart from 'vue-echarts';
import IntroduceItem from './introduce-item.vue';
import Trend from '@/components/trend/index.vue';
import { toYuan } from '@/utils/util';
import useLoading from '@/hooks/use-loading';
import numeral from 'numeral';
import dayjs from 'dayjs';
import { AxisData } from '@/api/dashboard.ts';

const attarSpan = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
};
const [loading, setLoading] = useLoading(true);

// =========================== 访问量EChart的options加工厂 =======================
const visitEChartOptionsFactory = () => {
  const data = ref<[string[], number[]]>([[], []]);
  const option = computed(() => {
    return {
      xAxis: {
        type: 'category',
        data: data.value[0],
        boundaryGap: false,
        show: false,
        axisPointer: {
          show: true,
          lineStyle: {
            color: '#c6e2ff',
            width: 1,
          },
        },
      },
      yAxis: {
        type: 'value',
        show: false,
      },
      tooltip: {
        trigger: 'axis',
      },
      series: [
        {
          name: '日访问量',
          data: data.value[1],
          type: 'line',
          smooth: true, //平滑处理
          symbolSize: 2, //标记的大小，
          lineStyle: {
            width: 1,
            color: '#1a53ff',
          },
          emphasis: {
            disabled: true, //关闭高亮状态可以在鼠标移到图形上，tooltip 触发，
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: '#ecf5ff',
          },
        },
      ],
      grid: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
      },
    };
  });
  return {data, option};
};

// =========================== 订单量EChart的options加工厂 =======================
const orderEChartOptionsFactory = () => {
  const data = ref<[string[], number[]]>([[], []]);
  const option = computed(() => {
    return {
      xAxis: {
        type: 'category',
        data: data.value[0],
        show: false,
      },
      yAxis: {
        type: 'value',
        show: false,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      series: [
        {
          name: '日订单量',
          data: data.value[1],
          type: 'bar',
          color: '#1a53ff',
        },
      ],
      grid: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
      },
    };
  });
  return {data, option};
};

const {data: visitData, option: visitOption} = visitEChartOptionsFactory();
const {data: orderData, option: orderOption} = orderEChartOptionsFactory();

const fetchDataList = async () => {
  setLoading(true);
  try {
    // const {data} = await getIntroduceData();
    // data.visitData.forEach(({x, y}) => {
    //   visitData.value[0].push(x);
    //   visitData.value[1].push(y);
    // });
    // data.orderData.forEach(({x, y}) => {
    //   orderData.value[0].push(x);
    //   orderData.value[1].push(y);
    // });

    const visitData_: AxisData[] = [];
    const visitY = [5, 6, 9, 8, 4, 2, 3, 5, 1, 6, 8, 4, 7, 5, 6];
    for (let i = visitY.length - 1; i >= 0; i--) {
      visitData_.push({
        x: dayjs().subtract(i, 'day').format('YYYY-MM-DD'),
        y: visitY[i],
      });
    }

    visitData_.forEach(({x, y}) => {
      visitData.value[0].push(x);
      visitData.value[1].push(y);
    });

    const orderData_: AxisData[] = [];
    const orderY = [60, 70, 111, 33, 32, 52, 33, 44, 13, 21, 34, 55, 90, 34, 66];
    for (let i = orderY.length - 1; i >= 0; i--) {
      orderData_.push({
        x: dayjs().subtract(i, 'day').format('YYYY-MM-DD'),
        y: orderY[i],
      });
    }

    orderData_.forEach(({x, y}) => {
      orderData.value[0].push(x);
      orderData.value[1].push(y);
    });
  } catch (err) {
  } finally {
    setLoading(false);
  }
};
fetchDataList();

</script>

<style lang="scss" scoped>
.introduce {
  > .el-col {
    margin-bottom: 8px;
  }

  .assimilate {
    .ratio {
      margin-left: 5px;
    }
  }

  .progress {
    width: 100%;

    :deep(.el-progress__text) {
      font-size: 14px !important;
    }
  }
}
</style>
